<template>
  <div class="rightDrawerCompFull" ref="editGroupFormRef">
    <a-form-model ref="formComp" :model="queryParams" layout="horizontal" class="AsteriskAfter newEditStyle editGroup">
      <!-- 激活流水号 -->
      <a-row :gutter="40">
        <a-col :md="24" :sm="24">
          <a-form-model-item label="激活标识码" >
            <a-input v-model="queryParams.operateSn" @keyup.enter="searchFun" :allow-clear="true" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- VIN -->
      <a-row :gutter="40">
        <a-col :md="24" :sm="24">
          <a-form-model-item label="VIN" >
            <a-input v-model="queryParams.vin" @keyup.enter="searchFun" :allow-clear="true" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- 车型 -->
      <!-- <a-row :gutter="40">
        <a-col :md="24" :sm="24">
          <a-form-model-item :label="$t('vehicleModel')">
            <car-model-select
              :query="{time:nowTime}"
              :defaultValue="queryParams.modelId"
              :hasAll="false"
              :clear="true"
              mode="multiple"
              @changeoption="queryParams.modelId = $event"
            >
            </car-model-select>
          </a-form-model-item>
        </a-col>
      </a-row> -->
      <!-- 服务代码 -->
      <a-row :gutter="40">
        <a-col :md="24" :sm="24">
          <a-form-model-item :label="$t('serviceCode')" >
            <a-input v-model="queryParams.serviceCode" @keyup.enter="searchFun" :allow-clear="true" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- 服务名称 -->
      <!-- <a-row :gutter="40">
        <a-col :md="24" :sm="24">
          <a-form-model-item :label="$t('serviceName')">
            <a-input v-model="queryParams.serviceName" @keyup.enter="searchFun" :allow-clear="true" />
          </a-form-model-item>
        </a-col>
      </a-row> -->
      <!-- 服务到期日期 -->
      <a-row :gutter="40">
        <a-col :md="24" :sm="24">
          <a-form-model-item :label="$t('serviceExpireDate')" >
            <a-range-picker
              :show-time="{ format: 'HH:mm:ss' }"
              format="YYYY-MM-DD HH:mm:ss"
              :value="defaultRange1"
              :allow-clear="true"
              @change="onChange"
              style="width:100%"
              dropdownClassName="rlCls" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- 订阅状态 -->
      <!-- <a-row :gutter="40">
        <a-col :md="24" :sm="24">
          <a-form-model-item :label="$t('subscriptionState')">
            <subs-service-status-select
              mode="multiple"
              :default-value="queryParams.serviceStatus"
              :clear="true"
              @changeoption="queryParams.serviceStatus = $event"></subs-service-status-select>
          </a-form-model-item>
        </a-col>
      </a-row> -->
      <!-- 激活状态 -->
      <a-row :gutter="40">
        <a-col :md="24" :sm="24">
          <a-form-model-item :label="$t('activeState')">
            <subs-service-status-select
              mode="multiple"
              :default-value="queryParams.activeStatus"
              :clear="true"
              @changeoption="queryParams.activeStatus = $event"></subs-service-status-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- 服务开始日期 -->
      <a-row :gutter="40">
        <a-col :md="24" :sm="24">
          <a-form-model-item :label="$t('服务开始日期')" >
            <a-range-picker
              :show-time="{ format: 'HH:mm:ss' }"
              format="YYYY-MM-DD HH:mm:ss"
              :value="defaultRange2"
              :allow-clear="true"
              @change="onChangeSuccessTime"
              style="width:100%"
              dropdownClassName="rlCls" />
          </a-form-model-item>
        </a-col>
      </a-row>
      <!-- 激活发起时间 -->
      <!--<a-row :gutter="40">-->
        <!--<a-col :md="24" :sm="24">-->
          <!--<a-form-model-item :label="$t('激活发起时间')" >-->
            <!--<a-range-picker-->
              <!--:show-time="{ format: 'HH:mm:ss' }"-->
              <!--format="YYYY-MM-DD HH:mm:ss"-->
              <!--:value="defaultRange3"-->
              <!--:allow-clear="true"-->
              <!--@change="onChangeStartTime"-->
              <!--style="width:100%"-->
              <!--dropdownClassName="rlCls" />-->
          <!--</a-form-model-item>-->
        <!--</a-col>-->
      <!--</a-row>-->
    </a-form-model>
  </div>
</template>
<script>
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
import CommonSelect from '@/components/SelfComponents/CommonSelect.vue'
import { mapState } from 'vuex'
import CarModelSelect from '@/views/components/CarModelSelect'
import SubsServiceStatusSelect from '@/views/components/SubsServiceStatusSelect'
import moment from 'moment'
export default {
  components: { tableEllipsis, CommonSelect, CarModelSelect, SubsServiceStatusSelect },
  props: {
    nowTime: {
      type: Number,
      default: 369852147
    },
    searchFun: {
      type: Function,
      default: () => {

      }
    }
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.subscriptionMaintain.queryParams
    }),
    // 创建时间选择的默认值
    defaultRange1 () {
      if (this.queryParams.dueStartTime && this.queryParams.dueEndTime) {
        return [moment(this.queryParams.dueStartTime), moment(this.queryParams.dueEndTime)]
      }
      return []
    },
    defaultRange2 () {
      if (this.queryParams.succssStartTime && this.queryParams.susseccEndTime) {
        return [moment(this.queryParams.succssStartTime), moment(this.queryParams.susseccEndTime)]
      }
      return []
    },
    defaultRange3 () {
      if (this.queryParams.activeStartTime && this.queryParams.activeEndTime) {
        return [moment(this.queryParams.activeStartTime), moment(this.queryParams.activeEndTime)]
      }
      return []
    },
  },
  data () {
    return {
    }
  },
  methods: {
    onChange (date, dateString) {
      // eslint-disable-next-line prefer-destructuring
      this.queryParams.dueStartTime = dateString[0]
      // eslint-disable-next-line prefer-destructuring
      this.queryParams.dueEndTime = dateString[1]
    },
    onChangeStartTime (date, dateString) {
      // eslint-disable-next-line prefer-destructuring
      this.queryParams.activeStartTime = dateString[0]
      // eslint-disable-next-line prefer-destructuring
      this.queryParams.activeEndTime = dateString[1]
    },
    onChangeSuccessTime (date, dateString) {
      // eslint-disable-next-line prefer-destructuring
      this.queryParams.succssStartTime = dateString[0]
      // eslint-disable-next-line prefer-destructuring
      this.queryParams.susseccEndTime = dateString[1]
    },
  }
}
</script>
<style  lang="less"  scoped>
</style>
<style lang="less">
.rlCls {
  .ant-calendar-range {
    width: 100%;
  }
}
</style>
